import { createApp } from 'vue'
import { createPinia } from 'pinia'

// 引入懒加载指令插件
import { lazyPlugin } from '@/directives'
// 定义懒加载插件
// import { useIntersectionObserver } from '@vueuse/core'
// 引入全局组件插件
import { componentPlugin } from './components'

import App from './App.vue'
import router from './router'

// 初始化样式文件
import '@/styles/common.scss'

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()

const app = createApp(App)

app.use(pinia)
app.use(router)
app.use(componentPlugin)
app.mount('#app')
app.use(lazyPlugin)
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)


// 定义全局指令

// app.directive('img-lazy',{
//     mounted(el,binding){
//         // el:指令绑定的那个元素 img
//         // binding：binding.value  指令等于号后面绑定的表达式的值  图片url
//         console.log(el,binding.value);
//         const { stop } = useIntersectionObserver(
//             el,
//             ([{ isIntersecting }]) => {
//               console.log(isIntersecting)
//               if (isIntersecting) {
//                 // 进入视口区域
//                 el.src = binding.value
//                 stop()
//               }
//             },
//           )
//         }
    
// })
